/**
 * @description 组件样式
 * @author: 陈陈
 * @date: 2025/05/09
 * @phone: 18560000860
 * @email: 18560000860@qq.com
 * @company: 济南晨霜信息技术有限公司 /
 * @business: 承接前后端项目的开发
 */
.pure-image {
    display: var(--pure-image-display, inline-flex);
    position: relative;
    width: var(--pure-image-width, 160px);
    height: var(--pure-image-height, 160px);

    &__image {
        width: 100%;
        height: 100%;
        display: block;
        border-radius: inherit;
        opacity: 0;
    }

    &__placeholder {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 1;
        width: 100%;
        height: 100%;
        border-radius: inherit;
        display: block;
    }

    &__status {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 1;
        width: 100%;
        height: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        border-radius: inherit;
        gap: var(--pure-image-status-gap, 5px);
        color: var(--pure-image-status-color, var(--pure-text-color-light));

        &__icon {
            font-size: var(--pure-image-icon-font-size, 2em);
            color: var(--pure-image-icon-color);
            font-weight: var(--pure-image-icon-font-weight);
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            line-height: 1;
        }

        &__text {
            font-size: var(--pure-image-text-font-size, 0.8em);
            font-weight: var(--pure-image-text-font-weight);
            color: var(--pure-image-text-color);
        }
    }

    &--success {
        .pure-image__image {
            opacity: 1;
        }
    }

    &--spin {
        .pure-image__status__icon--loading {
            animation: pure-animation-spin var(--pure-image-loading-animation-duration, 1000ms) var(--pure-image-loading-animation-timing-function, linear) 0s infinite;
        }
    }

    &--circle {
        border-radius: var(--pure-image-border-radius, 50%);
    }
}
